<template> 
<div class="searchCondition">
    <el-tree-select
    v-model="chooseTypes"
    :data="typeTree"
    multiple
    :render-after-expand="false"
    placeholder="请选择收支细类"
  />
    <el-button :icon="Search" circle class="searcnBtn" />
    <el-button class="manageBtn" icon="SetUp" @click="toCategoryManage">细类管理</el-button>
</div>
<hr style="background-color: #e8e8e8; height: 2px; border: none" />
</template>

<script setup>
import { Search } from '@element-plus/icons-vue';
import { ref } from 'vue';
import router from '@/router';

const chooseTypes = ref()
const typeTree = [{
        label: '收入',
        children: [{
            value: 1,
            label: '工资'
        },{
            value: 2,
            label: '彩票'
        }]
    },{
        label: '支出',
        children: [{
            value: 3,
            label: '餐饮'
        },{
            value: 4,
            label: '购物'
        }]
    }
];

const toCategoryManage = () =>{
    router.push('/categoryManage')
}
</script>

<style scoped>
.searcnBtn {
    margin: 0 10px;
}

.manageBtn{
    float: right;
}
</style>